<template>
 <div class="main">
    <div class="card">
      <div class="card_left">
        <div class="card_left_title">个人后台管理系统</div>
        <div>good good study,day day up!</div>
      </div>
      <div class="card_right">
        <div class="card_right_title">欢迎登录</div>
      
  <a-form-model
    :model="form"
    ref="ruleForm"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
    :rules="rules"
  >
    <a-form-model-item
      label="用户名"
      prop="username"
    >
      <a-input v-model="form.username" />
    </a-form-model-item>
    <a-form-model-item
      label="密码"
      prop="password"
    >
      <a-input v-model="form.password" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button
        type="primary"
        html-type="submit"
      >
        登录
      </a-button>
    </a-form-model-item>
  </a-form-model>
      </div>
    </div>
  </div>



</template>

<script>
import { fetchData } from "@/utils/common";
import { login } from "@/api/login.js";
import { inputRequired } from "@/utils";
import { mapActions } from "vuex";
import { actions } from "@/store/modules/login";
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [inputRequired("用户名")],
        password: [inputRequired("密码")],
      },
    };
  },
  methods: {
    // ...mapActions("login", [actions.UPDATE_USER_INFO]),

    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store
        .dispatch('user/_login', this.form)
        .then(res => {
          this.$router.push("/index").catch(err => (
            console.log(err)
          ))
          // if (!res.data.success) {
          //   this.refresh()
          // } else {
          //   this.$router.push(this.$route.query.redirect)
            // if (this.notifyObj) {
            //   this.notifyObj.close()
            // }
            // this.notifyObj = null
          // }
        })
        .catch(error => {
          // this.refresh()
          this.$message.error(error)
        })
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style.less";
</style>